<!-- 小区公告详情 -->
<template>
	<view class="no-warpper">
		<view class="nl-shadow-box nl-box-padding u-skeleton">
			<view class="title u-skeleton-rect">
				{{notice.title}}
			</view>
			<view class="user">
				<view class="left">
					<view class="img u-skeleton-circle">
						<image :src="notice.headPortrait" />
					</view>
					<view class="name-box">
						<view class="notice-name u-skeleton-rect">{{notice.userName}}</view>
						<text class="notice-time u-skeleton-rect">{{notice.createTime}}</text>
					</view>
				</view>
				<!-- <view class="views">
					<u-icon name="eye"></u-icon>
					<text class="u-skeleton-rect">浏览量:{{notice.views}}</text>
				</view> -->
			</view>
			<scroll-view scroll-y="true" class="scroll-box">
				<view class="content-box u-skeleton-rect">
					<view class="content">
						<u-parse :html="notice.context"></u-parse>
					</view>
				</view>
			</scroll-view>
		</view>
		<!--引用组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import {
		getNotices
	} from '@/api/notices.js'; // 小区公告接口
	import {
		replaceImgSrc
	} from '@/utils/ImageUtil.js'
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {IMG_URL} from '@/utils/request.js'
	export default {
		components: {},
		data() {
			return {
				notice: {
					// name: '',
					// createTime: '',
					// headPortrait: '',
					// img: '',
					// title: '',
					// text: '',
					// views: ''  //浏览量
				},
				noticeId: '',
				loading: true
			}
		},
		onLoad(options) {
			// console.log('info',options.noticeId)
			this.noticeId = options.noticeId
			this.getNotices()
		},
		computed: {
			...mapState('user', ['userCommunity'])
		},
		methods: {
			/**
			 * 获取公告详情
			 */
			getNotices() {
				var data = {
					communityId: this.userCommunity.communityId,
					page: '1',
					row: '10',
					noticeId: this.noticeId
				}
				var that = this
				getNotices(data).then((res) => {
					let notice = res.notices[0]
					notice.timeStr = notice.startTime.replace(/:\d{1,2}$/, ' ');
					notice.context = replaceImgSrc(notice.context, IMG_URL);
					that.notice = notice;

					that.notice.headPortrait = '../../../static/portrait.png'
					that.loading = false;
					console.log('获取公告详情', that.notice, '---', IMG_URL)
				})
			},
		}
	}
</script>

<style lang="scss">
	.scroll-box {
		width: 100%;
		max-height: 80vh;
	}

	.nl-shadow-box {
		margin-bottom: 40rpx;
	}

	.nl-box-padding {
		padding: 24rpx;
	}

	.title {
		font-size: $uni-font-size-lg;
		font-weight: bold;
		margin-bottom: 20rpx;
		min-width: 300rpx;
	}

	.user {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.left {
			display: flex;
			align-items: center;

			.img {
				width: 68rpx;
				height: 68rpx;
				border-radius: 100rpx;
				margin-right: 16rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name-box {
				flex: 1;
				margin-right: auto;
				.notice-name{
					min-height: 40rpx;
					min-width: 140rpx;
				}
				.notice-time{
					min-height: 40rpx;
					min-width: 300rpx;
				}
				view {
					max-width: 400rpx;
					display: inline-block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: $uni-font-size-base;
					font-weight: bold;
				}
				
				text {
					display: block;
					font-size: $uni-font-size-sm;
					color: $nl-text-color-auxiliary;
				}
			}
		}

		.views {
			margin-left: auto;
			margin-top: auto;
			display: flex;
			align-items: center;
			color: $nl-text-color-auxiliary;
			min-width: 50rpx;
			
			text {
				margin-left: 4rpx;
				font-size: $uni-font-size-sm;
			}
		}
	}

	.content-box {
		width: 100%;
		.content {
			img {
				width: 100%;
			}

			.text {
				text-align: justify;
				color: $nl-text-color-grey;
			}
		}
	}
</style>
